/**
 * Created by hasee on 2017/10/11.
 */
import React,{Component} from 'react';
import {
    AppRegistry,
    Text,
    View,
    Image,
    Button,
    FlatList,
    StyleSheet,
    TouchableOpacity,
    Animated,
    PanResponder,
    Easing
    } from 'react-native';
// import NetUtils from 'Tool/netUtils'



//动画
class AnimatedView extends Component{
    constructor(props) {
        super(props);
        this.state={
            fade: new Animated.Value(1),
            pan: new Animated.ValueXY(),
            fadeInOpacity: new Animated.Value(0),
            rotation: new Animated.Value(0),
            fontSize: new Animated.Value(0)
        };
    }


    componentWillMount() {
        this._panResponder = PanResponder.create({
            // 要求成为响应者：
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
            onMoveShouldSetPanResponder: (evt, gestureState) => true,
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

            onPanResponderGrant: (evt, gestureState) => {
                console.log('开始手势操作');
                // console.log(evt);
                // console.log(gestureState)
                // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！

                // gestureState.{x,y} 现在会被设置为0
            },
            onPanResponderMove: (evt, gestureState) => {
                console.log('移动');
                console.log(evt);
                console.log(gestureState)
                // 最近一次的移动距离为gestureState.move{X,Y}

                // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
            },
            // onPanResponderMove:Animated.event(
            //     [null, {dx: this.state.pan.x, dy:this.state.pan.y}] // 绑定动画值
            // ),

            onPanResponderTerminationRequest: (evt, gestureState) => true,
            onPanResponderRelease: (evt, gestureState) => {
                console.log('结束');
                // console.log(evt);
                // console.log(gestureState)
                // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
                // 一般来说这意味着一个手势操作已经成功完成。
            },
            onPanResponderTerminate: (evt, gestureState) => {
                // console.log(evt);
                // console.log(gestureState)
                // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
            },
            onShouldBlockNativeResponder: (evt, gestureState) => {
                // console.log(evt);
                // console.log(gestureState);
                // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
                // 默认返回true。目前暂时只支持android。
                return true;
            },
        });
    };
    _press = ()=> {
        Animated.timing(                            // 随时间变化而执行的动画类型
            this.state.pan,                      // 动画中的变量值
            {
                toValue: {x: 100, y: 100},                             // 透明度最终变为1，即完全不透明
                duration: 1000,
                // useNativeDriver:true
            }
        ).start(()=>{
            console.log('结束')
        });


        const timing = Animated.timing;
        Animated.parallel(['fadeInOpacity', 'rotation', 'fontSize'].map(property => {
            return timing(this.state[property], {
                toValue: 3,
                duration: 1000,
                easing: Easing.linear
            });
        })).start();

    };
    render() {
        return(
            <View
               // {...this._panResponder.panHandlers}
            >
                <Button
                    onPress={this._press}
                    title="动画"
                />
                <Animated.View
                    style={[{width:50, height: 50, backgroundColor: '#540e23'}, this.state.pan.getLayout()]}
                >
                </Animated.View>

                <Animated.View style={{
                    opacity: this.state.fadeInOpacity,
                    backgroundColor: 'red',
                    transform: [{
                        rotateZ: this.state.rotation.interpolate({
                            inputRange: [0,1,2, 3],
                            outputRange: ['0deg', '360deg','180deg', '360deg']
                        })
                    }]
                }}>
                    <Animated.Text style={{
                        fontSize: this.state.fontSize.interpolate({
                            inputRange: [0,1, 2, 3],
                            outputRange: [12,26, 12, 30]
                        })
                    }}>
                    我骑着七彩祥云出现了😈💨
                    </Animated.Text>
                </Animated.View>
            </View>


        )
    }
};

export default class MainScreen extends React.Component {
    static navigationOptions={
        headerTitle: '主页11',
        headerTintColor: "#514254",
        headerRight:(
            <View>
                <Button
                    title="点我"
                    onPress={() => alert("hello")}
                />
            </View>
        ),
    };

    // data = [];
    constructor (props) {
        super(props);
        const data = [];

        for (var i = 0; i < 3; i++) {
            const item = new Item();
            item.title += i;
            data.push(item);
        }
        var self = this;
        this.state = {
            refreshing: false,
            data: data
        };
            //加载数据

         // fetch('https://facebook.github.io/react-native/movies.json')
        return;
        fetch('http://192.168.10.64:8000/api')
        .then((response) => response.json())
        .then((responseJson) => {
            var da = [];
            for (var i = 0; i < responseJson.length; i++) {
                const item = new Item();
                item.id = responseJson[i].id;
                item.title = responseJson[i].title;
                // da.push(item)
                this.state.data.push(item)
            }
            // this.setState({
            //     //复制数据源
            //     data: da,
            // });
            return responseJson;
        })
        .catch((error) => {
            console.error(error);
        });
    }

    _renderItem = ({item})=> (
        <ListItem
        {...this.props}
        item = {item}
        id = {item.id}
        key={item.id}
        />
    );
    _refresh() {
       console.log('wodianl ')

    }
    render() {
        console.log('初始化主页');
        const {navigate} = this.props.navigation;
        console.log(this.state.data.length);
        return (
            <View>
                {/*<FlatList*/}
                    {/*data={this.state.data}*/}
                    {/*renderItem= {this._renderItem}*/}
                    {/*// refreshing={this.state.refreshing}*/}
                    {/*// onRefresh={this._refresh}*/}
                {/*/>*/}
                <AnimatedView
                />
            </View>
        )
    }
}

class ListItem extends React.PureComponent {
    item1 = this.props.item;
    _press() {
        const {navigate} = this.navigation;
        navigate('List')
    }
    render() {
        // {...this.props} 改写this指针
        const {navigate} = this.props.navigation;
        return (
            <TouchableOpacity
                {...this.props}
                style={[{flex: 1, flexDirection: 'row'},style.cell]}
                onPress={this._press}
                >
                <Image
                    source = {require('./../image/001.jpg')}
                    style={[style.icon]}
                    />
                <Text
                    style={style.title}
                    >
                    {this.item1.title}
                </Text>
            </TouchableOpacity>
        )
    }
}
const style = StyleSheet.create({
    cell: {
        marginTop: 10
    },
    icon: {
        height: 50,
        width: 100
    },
    title: {
        fontSize: 25,
        marginLeft: 5
    }
});

class Item {
    title= 'baioti';
    icon = './../image/001.jpg';
    // key = 'ss';

}


